<template>
    <div class="searchj-box">
    <div class="row">
      <div class="left">
        <el-icon>
          <Search />
        </el-icon>
        <span>筛选搜索</span>
      </div>
      <div class="right">
        <el-button @click="queryReset">重置</el-button>
        <el-button type="primary" @click="getReturnApply">查询搜索</el-button>
      </div>
    </div>
    <el-form class="form">
      <el-form-item label="输入搜索：">
        <el-input v-model="form.id"  placeholder="服务单号" />
      </el-form-item>
      <el-form-item label="订单状态：">
        <el-select v-model="form.status" clearable  class="m-2" placeholder="全部">
          <el-option value="0" label="待处理"></el-option>
          <el-option value="1" label="退货中"></el-option>
          <el-option value="2" label="已完成"></el-option>
          <el-option value="3" label="已拒绝"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="申请时间：">
        <el-date-picker v-model="form.createTime" type="date" placeholder="请选择时间"
          style="width: 100%" />
      </el-form-item>
    </el-form>
    <el-form class="form2">
        <el-form-item label="操作人员：">
        <el-input v-model="form.handleMan"  placeholder="全部" />
      </el-form-item>
      <el-form-item label="处理时间：">
        <el-date-picker v-model="form.handleTime" type="date" placeholder="请选择时间"
          style="width: 100%" />
      </el-form-item>
    </el-form>
  </div>
  <el-table :data="list" border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="id" label="服务单号"  width="100" hight="180" align="center"/>
        <el-table-column prop="createTime" label="申请时间" width="180" align="center">
            <template #default="{ row }">
        {{ formateDate(row.createTime) }}
      </template>
        </el-table-column>
        <el-table-column prop="memberUsername" label="用户账号" align="center"/>
        <el-table-column prop="productRealPrice" label="退款金额" align="center">
            <template #default="{ row }">
        ￥{{row.productRealPrice }}
      </template>
        </el-table-column>
        <el-table-column prop="status" label="申请状态" align="center">
            <template #default="{ row }">
        <span v-if="row.status === 0">待处理</span>
        <span v-else-if="row.status === 1">退货中</span>
        <span v-else-if="row.status === 2">已完成</span>
        <span v-else-if="row.status === 3">已拒绝</span>
      </template>
        </el-table-column>
        <el-table-column prop="handleTime" label="处理时间" width="180" align="center">
            <template #default="{ row }">
        {{ formateDate(row.handleTime) }}
      </template>
        </el-table-column>
            <el-table-column label="操作" align="center">
      <template #default="{ row }">
        <el-button @click="router.push('/oms/returnApplyDetail?id=' + row.id)">查看详情</el-button>
      </template>
    </el-table-column>
    </el-table>
  <div class="foot">
    <div class="left">
      <el-select class="m-2" v-model="optionList" placeholder="批量删除">
        <el-option v-for="item in options" ::key="item.value" :value="item.value" :label="item.label" />
      </el-select>
      <el-button type="primary" @click="ConfirmTn">确定</el-button>
    </div>
    <ElConfigProvider :locale="zhCn">
      <div class="page">
        <el-pagination v-model:current-page="form.pageNum" v-model:page-size="form.pageSize" :page-sizes="[5,10,15]"
          background layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="getReturnApply"
          @current-change="getReturnApply" />
      </div>
    </ElConfigProvider>
  </div>
</template>
<script setup lang='ts'>
import useTable from '@/hooks/useTable'
import { ElMessageBox, ElMessage } from 'element-plus';
import {Search } from "@element-plus/icons-vue"
import { ref, reactive } from 'vue'
import { formateDate } from '@/utils'
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import { getReturnApplyListApi,getReturnApplyDeleteApi } from './api'
import { useRouter } from "vue-router"
const router = useRouter()
const form = reactive({
  pageNum: 1,
    pageSize: 10,
    id:"",
  createTime: "",
  status: "",
  handleMan:"",
  handleTime:"",
})
const list = ref<any>([])
const total = ref()
const deleteList = ref<number[]>([])
const optionList = ref([])
const options = [
    { value: '0', label: '批量删除', },
]
// 获取复选框状态id
const handleSelectionChange = (val: OrderModel[]) => {
    val.forEach(item => {
        list.value.find(sur => sur.id === item.id)
        deleteList.value.push(item.id)
    })
}
// 重置
const queryReset = () => {
    form.pageNum = 1
    form.pageSize = 10
    form.id = ''
    form.handleMan = ''
    form.status = ''
    form.createTime = ''
    form.handleTime = ''

    getReturnApply()
}
// 封装请求数据
const getReturnApply = () => {
  getReturnApplyListApi(form).then(res => {
        if (res.code === 200) {
            list.value = res.data.list
            total.value = res.data.total
        }
    })
}
getReturnApply()

// 批量操作
const ConfirmTn = () => {
    if (deleteList.value.length == 0) {
        ElMessage.warning('请选择要操作的订单')
        return
    }
    if (optionList.value[0] == 0) {
        ElMessageBox.confirm("是否要进行批量删除操作?", "提示?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: 'warning',
        }).then(() => {
            getReturnApplyDeleteApi(deleteList.value).then(res => {
                if (res.code === 200) {
                    ElMessage.success('删除成功')
                    getReturnApply()
                }
            })
        })
    } else {
        ElMessage.warning('请选择执行操作')
    }
}

</script>
<style lang="less" scoped>
.searchj-box {
  box-shadow: 0 0 4px #ccc;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;

  .row {
    padding: 20px 0;
    display: flex;

    &:first-child {
      justify-content: space-between;
    }

    &:last-child {
      width: 400px;

      span {
        width: 100px;
      }
    }
  }

  .form{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    width: 100%;
    :deep(.el-form-item){
        width: 32%;
    }
  }
  .form2{
    display: flex;
    :deep(.el-form-item){
        width: 32%;
        margin-left: 20px;
    }
  }
}
.foot {
  display: flex;
  justify-content: space-between;
  padding-top: 30px;
}
</style>